<!--
 * @Author: chenjiao
 * @Date: 2021-06-30 17:47:06
 * @LastEditTime: 2021-11-13 10:21:50
 * @LastEditors: Please set LastEditors
 * @Description: 会员标签
 * @FilePath: \ebc-admin\src\views\member\MemberInfo\component\buyerLabel.vue
-->
<template>
  <div class="buyerLabel">
      <div class="tag-box">
          <h3>自动标签</h3>
          <div class="tags">
             <el-tag
              v-for="tag in autoTags"
              :key="tag.tagName"
              type="success">
                {{tag.tagName}}
            </el-tag>
          </div>
          <h3>手动标签</h3>
          <div class="tags">
            <el-tag
              v-for="(tag,index) in tags"
              :key="tag.tagName"
               closable
               @close="closelabel(tag,index)"
               type="danger">
                {{tag.tagName}}
            </el-tag>
          </div>
        <div><el-button type="primary" icon="el-icon-circle-plus" @click="addTags">打标签</el-button></div>
      </div>
      <!-- 添加标签列表弹窗 -->
       <el-dialog
          title="添加手动标签"
          :visible.sync="dialogTableVisible"
          :close-on-click-modal="false"
          width="70%">
          <tab-list 
            ref="tagList"
            :searchs="recordSearchs"
            :list-hedar="recordHedar"
            :api-function="apiFunction"
            :params="params"
            > 
            <span class="addBtn" slot="button"><el-button  type="primary" icon="el-icon-plus" @click="setTags"></el-button></span>
            <template slot="operate" slot-scope="scope">
              <el-button type="text" size="small" @click="chooseTags(scope.value)">{{scope.value.related ? '取消':'选中'}}</el-button>
            </template>
          </tab-list>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary"  @click="dialogTableVisible = false">保 存</el-button>
            <el-button @click="dialogTableVisible = false">取 消</el-button>
           </span>
       </el-dialog>   
       <!-- 添加标签设置弹窗 -->
       <el-dialog
          title="添加手动标签"
          v-if="dialogTableVisible2"
          :visible.sync="dialogTableVisible2"
          :close-on-click-modal="false"
          width="40%"
        > 
          <edit-from
           ref="form"
          :form="form"
          :edit-list="editList"
          :rules="rules"
          validate-on-rule-change
          @on-submit="addOrEdit()"/>

          <span slot="footer" class="dialog-footer">
            <el-button type="primary"  @click="$refs.form.ruleFrom()">保 存</el-button>
            <el-button @click="dialogTableVisible2 = false">取 消</el-button>
           </span>
       </el-dialog>
  </div>
</template>

<script>
// 组件
import tabList from '@/components/admin/tab-list.vue'
import editFrom from '@/components/admin/edit-form.vue' 
// 数据配置
import { memberTagsData } from '../../config/list.config'
// 接口
import { tagList, makeTagList, makeTag , chooseTags ,deleteTags } from '@/api/member.js'
// 公共方法
import { asyncApiFun } from '@/utils/utils'

  export default {
    name:'buyerLabel',
    components: { 
      tabList, 
      editFrom ,
      
      },
    props:{
        memberId:{
          type:String,
          default:null
        }
      },
    data(){
      return {
        ...memberTagsData(),
        apiFunction:makeTagList,
        tags: [],                        //手动标签  
        autoTags:[],                     //自动标签
        dialogTableVisible:false ,      //添加手动标签列表弹窗标识
        dialogTableVisible2:false,      //添加手动标签设置弹窗标识
        params:{
           memberId: this.memberId
        },                      //添加手动标签参数
        form: {},                       //打标签表单
      }
    },
    computed:{
      getId(){
        return this.memberId
      }
    },
    created(){
      this.initDetail()
    },
    methods:{
      // 初始化页面
      async initDetail(){
        const _params = {
          memberId:this.getId
        }
        //请求标签自动、手动标签并回显
         const [list] = await asyncApiFun(tagList, _params.memberId)
         if(list.data) {
           const _list = list.data
           _list.forEach(item => {
             if(item.tagType === '0') {
               this.autoTags.push(item)
              }
             else {
               this.tags.push(item)
              }
           })
         }
      },
      // 删除已选标签
      async closelabel(tag,index){
        const memberId = this.getId
        const tagId = tag.tagId
        const [res] = await asyncApiFun( deleteTags , memberId, tagId )
          if(res) {
            this.tags.splice(index,1)
          }
      },
      // 添加手动标签列表弹窗
      addTags(){
        this.dialogTableVisible = true
        // this.params.memberId = this.getId
        if(this.$refs.tagList) this.$refs.tagList.getList()
      },
      // 设置手动标签
      setTags(){
        this.dialogTableVisible2 = true
        this.dialogTableVisible = true
      },
      // 提交标签表单
      async addOrEdit(){
        if(this.form.expire1) {
          this.form.expire = 0;
        }
        const { expire1, ...param  } = this.form;
        const _params = {
          ...param,
          memberId:this.getId
        }
        // 1.发送网络请求
        const [res] = await asyncApiFun( makeTag, _params )
        if(res){
          this.dialogTableVisible2 = false
          this.dialogTableVisible = true
          console.log(res)
          this.tags.push({..._params })
          this.$refs.tagList?.getList()
        }
      },
      // 打标签列表选中/取消标签
      async chooseTags({ tagId ,related ,tagName}){
        const memberId = this.getId  
        // 删除
         if (related) {
           const [res] = await asyncApiFun( deleteTags , memberId, tagId)
           this.$refs.tagList.getList() 
            if(res.data) this.tags.pop( {tagId,tagName, memberId })
         }
         else{
           const _params = {
             memberId: this.getId,
             tagId
           }
          //选中  
           const [res] = await asyncApiFun( chooseTags , _params)
           if(res){
             console.log(this.$refs.tagList)
           }
           if(res.data) this.tags.push({..._params ,tagName})
             this.$refs.tagList.getList()
          
         } 
         
       },

      // 初始化参数
      // initParams(param) {
      //   this.params = param
      // },
    }
  }
</script>

<style lang="scss" scoped>
.tag-box{
  width: 80%;
  margin: 0 auto;
  box-sizing: border-box;
}
h3{
  height:40px;
  display:table-cell;
  vertical-align: middle;
  border-left:10px solid #409eff;
  padding-left: 15px;
}
.tags{
  padding-left: 50px;
  margin:30px 0;
  width:80%;
}
.el-tag{
  margin: 5px 15px;
}
.addBtn{
  margin-left: 15px;
}

</style>